<template>
  <div class="block-title-wrapper"
    ref="blockTitle"
    :class="direction == 'right' ? 'right' : ''"
    :style="{transformOrigin:direction === 'right' ? 'left' : 'right'}">
    <p class="hy-lingxinti title-text"
      role="title"
      ref="blockTitleText"></p>
  </div>
</template>
<script>
export default {
  name: 'blockTitle',
  data() {
    return {}
  },
  props: ['words', 'direction'],
  mounted() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      let tw1 = TweenMax.to(this.$refs.blockTitle, 0.8, {
        opacity: 1,
        scaleX: 1
      })
      let tw2 = TweenMax.to(this.$refs.blockTitleText, 0.8, {
        opacity: 1,
        scrambleText: {
          text: this.words,
          chars: '_ ',
          speed: 0.3
        }
      })
      tl.addLabel('start')
        .add(tw1, 'start+=0')
        .add(tw2, 'start+=0.8')
      return tl
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
.block-title-wrapper {
  width: 100%;
  // height: 100%;
  background: url('../../assets/imgs/topTitle/group_left_title_bg.png') no-repeat
    right;
  opacity: 0;
  transform: scaleX(0);
  .title-text {
    line-height: 1.9;
    font-size: 20px;
    text-align: center;
    color: #fff;

    text-shadow: 1px 1px 4px #25a0ff, 1px -1px 4px #25a0ff, -1px 1px 4px #25a0ff,
      -1px -1px 3px #25a0ff;
    opacity: 0;
  }
}
.block-title-wrapper.right {
  background: url('../../assets/imgs/topTitle/group_right_title_bg.png') no-repeat
    left;
}
</style>
